<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div-card {
            border: 1px gray solid;
            border-radius: 10px;
            padding: 15px;
        }

        .div-card-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .div-card-son {
            width: 100px;
            height: 100px;
            color: darkgray;
            font-size: 15px;
        }
    </style>
  </head>

  <body>
    <!--position属性值为static时定位模式为静态定位，静态定位中元素不脱离文档流也不释放空间，不改变外部显示类型-->
    <!--<div class="div-card">
      <div class="div-card-title">
        position属性值为static时定位模式为静态定位，静态定位中元素不脱离文档流也不释放空间，不改变外部显示类型
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;position: static"></div>
        <div class="div-card-son" style="background: skyblue;position: static"></div>
        <div class="div-card-son" style="background: plum;position: static"></div>
      </div>
    </div>-->
    <br>

    <!--position属性值为relative时定位模式为相对定位，相对定位中元素不脱离文档流也不释放空间，不改变外部显示类型。通过top、bottom、left和right属性可设置相对定位元素相对于自身原始位置的偏移量，若不设置偏移量相对定位元素的偏移量不会有任何改变，设置偏移量后相对定位元素可能与页面中其他元素重叠，不会对其他元素的布局产生任何影响。HTML文件中书写位置越靠下的元素层级越高-->
    <!--<div class="div-card">
      <div class="div-card-title">
        position属性值为relative时定位模式为相对定位，相对定位中元素不脱离文档流也不释放空间，不改变外部显示类型
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;position: relative">1</div>
        <div class="div-card-son" style="background: skyblue;position: relative;left: 50px;top: -50px">2</div>
        <div class="div-card-son" style="background: plum;position: relative;left: 100px;top:-100px">3</div>

        <div class="div-card-son" style="background: pink;position: relative">1</div>
        <div class="div-card-son" style="background: plum;position: relative;left: 50px;top: -50px">3</div>
        <div class="div-card-son" style="background: skyblue;position: relative;left: 100px;top:-100px">2</div>
      </div>
    </div>-->
    <br>

    <!--position属性值为absolute时定位模式为绝对定位，绝对定位中元素脱离文档流也释放空间，改变外部显示类型为内联和块级的中间态inline-block。通过top、bottom、left和right属性可设置绝对定位元素相对于最近相对定位元素位置的偏移量，若不存在最近相对定位元素则根据浏览器视窗`<body>`标签定位，若不设置偏移量绝对定位元素的偏移量不会有任何改变，设置偏移量后绝对定位元素可能与页面中其他元素重叠，不会对其他元素的布局产生任何影响。HTML文件中书写位置越靠下的元素层级越高-->
    <!--<div class="div-card">
      <div class="div-card-title">
        绝对定位元素相对于浏览器视窗body标签位置偏移
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;position: absolute">1.1</div>
        <div class="div-card-son" style="background: skyblue;position: absolute;left:50px;bottom: 230px">1.2</div>
        <div class="div-card-son" style="background: plum;position: absolute;bottom: 0">1.3</div>
      </div>
    </div>
    <br>
    <div class="div-card">
      <div class="div-card-title">
        绝对定位元素相对于最近相对定位元素位置偏移
      </div>
      <div class="div-card-body" style="position: relative">
        <div class="div-card-son" style="background: pink;position: absolute;right: 0px">2.1</div>
        <div class="div-card-son" style="background: skyblue;position: absolute;right: 50px;top: 50px">2.2</div>
        <div class="div-card-son" style="background: plum;position: absolute;right:0px;bottom: 0px">2.3</div>
        <span class="div-card-son" style="background: greenyellow;position: absolute;right:500px;top: 50px;width: 50px;height: 50px">2.4</span>
      </div>
    </div>-->
    <br>

    <!--position属性值为fixed时定位模式为固定定位，固定定位中元素脱离文档流也释放空间，改变外部显示类型为内联和块级的中间态inline-block。通过top、bottom、left和right属性可设置固定定位元素相对于浏览器视窗`<body>`标签的偏移量，若不设置偏移量固定定位元素的偏移量不会有任何改变，设置偏移量后固定定位元素可能与页面中其他元素重叠，不会对其他元素的布局产生任何影响。HTML文件中书写位置越靠下的元素层级越高-->
    <!--<div class="div-card" style="min-height: 1000px">
      <div class="div-card-title">
        `fixed`被称为固定定位，固定定位也是一种绝对定位，二者特点唯一不同的是固定定位永远只根据浏览器视口进行定位，不随网页的滚动条滚动
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;position: fixed;left: 100px;top: 250px">1.固定</div>
        <div class="div-card-son" style="background: skyblue;position: fixed;top: 0px;left: 0px">2.固定</div>
        <div class="div-card-son" style="background: plum;position: static">3.静态</div>
      </div>
    </div>-->

    <!--position属性值为sticky时定位模式为粘滞定位。粘滞定位元素首先使用相对定位，当位置到达某阈值是使用固定定位，该阈值通过top、bottom、left和right属性设定-->
    <!--<div class="div-card-son" style="background: pink">正常</div>
    <div class="div-card-son" style="background: skyblue">正常</div>
    <div class="div-card-son" style="background: plum;position: sticky;top: 10px">粘滞</div>
    <div class="div-card-son" style="background: yellowgreen">正常</div>
    <div class="div-card-son" style="background: greenyellow">正常</div>
    <div class="div-card-son" style="background: sandybrown">正常</div>
    <div class="div-card-son" style="background: seagreen">正常</div>-->

    <!--z-index属性设置定位优先级，默认HTML文件中书写位置越靠下的元素层级越高，其属性值越大优先级越高，优先级越高则越优先显示-->
    <div class="div-card">
      <div class="div-card-title">
        z-index属性设置定位优先级，默认HTML文件中书写位置越靠下的元素层级越高，其属性值越大优先级越高，优先级越高则越优先显示
      </div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;position: relative;z-index: 40">1</div>
        <div class="div-card-son" style="background: skyblue;position: relative;left: 50px;top: -50px;z-index: 30">2</div>
        <div class="div-card-son" style="background: plum;position: relative;left: 100px;top:-100px;z-index: 20">3</div>
        <div class="div-card-son" style="background: yellowgreen;position: relative;left: 50px;top:-300px;z-index: 10">4</div>
      </div>
    </div>
  </body>
</html>